<template>
    <div class="show-container">
      <el-form ref="showForm" :model="showForm" :rules="showRules" 
      class="show-form" auto-complete="on" label-position="left">
  
        <div class="title-container">
          <h3 class="title">用户信息</h3>
        </div>
  
        <el-form-item prop="email">
          <el-input
            ref="email"
            v-model="showForm.email"
            placeholder="email"
            name="email"
            type="text"
            tabindex="1"
            auto-complete="on"
          />
        </el-form-item>
  
        <el-form-item prop="id">
            <el-input
              ref="id"
              v-model="showForm.id"
              placeholder="id"
              name="id"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>

          <el-form-item prop="phone">
            <el-input
              ref="phone"
              v-model="showForm.phone"
              placeholder="phone"
              name="phone"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>

          <el-form-item prop="status">
            <el-input
              ref="status"
              v-model="showForm.status"
              placeholder="status"
              name="status"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>

          <el-form-item prop="username">
            <el-input
              ref="username"
              v-model="showForm.username"
              placeholder="username"
              name="username"
              type="text"
              tabindex="1"
              auto-complete="on"
            />
          </el-form-item>
  
      </el-form>
    </div>
  </template>
  
  <script>
  import { Message } from 'element-ui'
  import '../../mock'
  import 'js-cookie'
  
  export default {
    name: 'Show',
    data() {
      return {
        showForm: {
          email: '1649340861@qq.com',
          id: '041',
          phone:'13536387945',
          status:'user',
          username:'HRC'
        },
        
      }
    },
    methods: {
        
    }
  }
  </script>
  
  <style>
    .show-form {
      position: relative;
      width: 520px;
      max-width: 100%;
      padding: 35px 50px 10px;
      margin: 0 auto;
      overflow: hidden;
      background-color: #283443;
      border-radius: 8px;
      opacity: 0.9;
    }
    .el-form-item {
      border: 1px solid rgba(255, 255, 255, 0.1);
      background: rgba(0, 0, 0, 0.1);
      border-radius: 5px;
      color: #454545;
    }
    .show-container {
      min-height: 100%;
      width: 100%;
      background-color: #2d3a4b;
      overflow: hidden;
  
      background-image: url('../assets/2.jpg');
      background-size: 25%;
  
      display: flex;
      align-items: center;
    }
    .title-container {
      position: relative;
    }
    .title {
      font-size: 26px;
      color: #eee;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  </style>